<template>
  <div class="rating-list-wrapper">
    <ul class="rating-list">
      <li
        v-show="computedRatings"
        class="item"
        v-for="(rating, index) in computedRatings"
        :key="index"
      >
        <div class="flex">
          <div class="portrait" v-if="main">
            <img width="28px" height="28px" :src="rating.avatar" />
          </div>
          <div class="content">
            <div class="rating-flex">
              <div class="user-l" v-if="main">
                <span>{{rating.username}}</span>
              </div>
              <div class="time">{{format(rating.rateTime)}}</div>
              <div class="user" v-if="!main">
                <span>{{rating.username}}</span>
                <img :src="rating.avatar" />
              </div>
            </div>
            <div class="star-wrapper" v-if="main">
              <star :size="24" :score="rating.score"></star>
            </div>
            <div class="rating-text">
              <i class="ico" :class="rating.rateType === 0 ? 'icon-thumb_up': 'icon-thumb_down'"></i>
              <p class="text">{{rating.text}}</p>
              <p class="no-text" v-if="!rating.text">该用户未填写评价内容...</p>
            </div>
          </div>
        </div>
        <div class="line"></div>
      </li>
    </ul>
    <div v-show="!computedRatings || !computedRatings.length" class="no-rating">暂无评价</div>
  </div>
</template>

<script>
import moment from 'moment'
import Star from '../star/star.vue'

const ALL = 2

export default {
  name: 'rating-list',
  props: {
    // 是否为主要评论组件
    main: {
      type: Boolean,
      default: true
    },
    ratings: {
      type: Array,
      default() {
        return []
      }
    },
    onlyContent: {
      type: Boolean,
      default: false
    },
    isActiveNum: {
      type: Number,
      default: ALL
    }
  },
  computed: {
    computedRatings() {
      const ret = []
      this.ratings.forEach((rating) => {
        if (this.onlyContent && !rating.text) {
          return
        }
        if (this.isActiveNum === ALL || rating.rateType === this.isActiveNum) {
          ret.push(rating)
        }
      })
      return ret
    }
  },
  methods: {
    format(date) {
      return moment(date).format('YYYY-MM-DD hh:mm')
    }
  },
  components: {
    Star
  }
}
</script>
<style lang='stylus' scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.rating-list
  .item
    padding 16px 0 0
    &:first-child
      padding 0
    .flex
      display flex
      .portrait
        margin-right 12px
        img
          border-radius 50%
      .content
        flex 1
        .rating-flex
          display flex
          justify-content space-between
          .user-l
            margin-bottom 4px
            line-height 12px
            font-size $fontsize-small-s
            color $color-text
          .time
            line-height 12px
            font-size $fontsize-small-s
            color $color-text-ss
          .user
            line-height 12px
            font-size $fontsize-small-s
            color $color-text-ss
            img
              margin-left 6px
              width 12px
              height 12px
              border-radius 50%
        .star-wrapper
          margin-bottom 6px
        .rating-text
          display flex
          align-items top
          .ico
            display inline-block
            line-height 24px
            font-size $fontsize-small
            margin-right 4px
            &.icon-thumb_up
              color $color-blue
            &.icon-thumb_down
              color $color-text-ss
          .text
            display inline-block
            line-height 24px
            white-space normal
            font-size $fontsize-small
            color $color-text
          .no-text
            display inline-block
            line-height 24px
            font-size $fontsize-small
            color $color-text-ss
    .line
      margin-top 16px
      border-1px($color = $color-row-line)
.no-rating
  font-size $fontsize-medium
  color $color-text-s
  text-align center
</style>
